<template>
  <div class="login-page-box">
    <el-card class="login-page-card">
      <el-form ref="ruleFormRef" :model="formInstance" :rules="validationRules" class="login-page-form" status-icon>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="formInstance.userName" />
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="formInstance.passWord" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">Create</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<script>
// import type { FormInst ance, FormRules } from 'element-plus'
export default {
  data() {
    return {
      formInstance: {
        userName: '',
        passWord: '',
      },
      validationRules: {
        userName: [
          {
            required: true,
            message: '请输入用户名', trigger: 'blur'
          },
          {
            min: 3,
            max: 5,
            message: '请输入3-5位字符的用户名', trigger: 'blur'
          },
        ],
        passWord: [
          {
            required: true,
            message: '请输入密码', trigger: 'blur'
          },
          {
            min: 3,
            max: 5,
            message: '请输入3-5位字符的密码', trigger: 'blur'
          },
        ],
      }
    }
  }
}
// const ruleFormRef = ref < FormInstance > ()
// const submitForm = async (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   await formEl.validate((valid, fields) => {
//     if (valid) {
//       console.log('submit!')
//     } else {
//       console.log('error submit!', fields)
//     }
//   })
// }

// const resetForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   formEl.resetFields()
// }

// const options = Array.from({ length: 10000 }).map((_, idx) => ({
//   value: `${idx + 1}`,
//   label: `${idx + 1}`,
// }))
</script>

<style scoped>
.login-page-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.login-page-card {
  height: 300px;
  width: 400px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-form-item {
  justify-content: centerd;
}
</style>
